<template>
  <div style="width: 95vw;height: 90vh;">
    <Tinyflow
      ref="tinyflowRef"
      :className="'custom-tinyflow'"
      :style="{ height: '100%', border: '1px solid #ccc' }"
      :data="initialData"
    />
    <button @click="fetchData">获取流程数据</button>
  </div>
</template>

<script setup lang="ts">
import Tinyflow from './components/Tinyflow.vue';
import { ref } from 'vue';

const tinyflowRef = ref<InstanceType<typeof Tinyflow> | null>(null);
const initialData = ref({
  "nodes": [
    {
      "id": "node_zQ7zeFMvsvA2j5AN",
      "position": {
        "x": 585.8435085614577,
        "y": 196.52832492869626
      },
      "data": {
        "title": "大模型",
        "description": "使用大模型处理问题",
        "systemPrompt": "",
        "userPrompt": ""
      },
      "type": "llmNode",
      "selected": true,
      "measured": {
        "width": 305,
        "height": 121
      },
      "dragging": false
    },
    {
      "id": "node_H10AF5d63BvSfJzZ",
      "position": {
        "x": 106.58234872469211,
        "y": 15.665055962417853
      },
      "data": {
        "title": "知识库",
        "description": "通过知识库获取内容",
        "systemPrompt": "",
        "userPrompt": "",
        "outputDefs": [
          {
            "name": "documents",
            "dataType": "Array",
            "nameDisabled": true,
            "dataTypeDisabled": true,
            "addChildDisabled": true,
            "children": [
              {
                "name": "title",
                "dataType": "String",
                "nameDisabled": true,
                "dataTypeDisabled": true,
                "id": "dgwvyK39ys5OZWID"
              },
              {
                "name": "content",
                "dataType": "String",
                "nameDisabled": true,
                "dataTypeDisabled": true,
                "id": "UETRPkaSMe1QbXKj"
              },
              {
                "name": "documentId",
                "dataType": "Number",
                "nameDisabled": true,
                "dataTypeDisabled": true,
                "id": "dyY5B1Zm6jmcrtU0"
              },
              {
                "name": "knowledgeId",
                "dataType": "Number",
                "nameDisabled": true,
                "dataTypeDisabled": true,
                "id": "CQ2EuH3myMv9ExpK"
              }
            ],
            "id": "CvLEbQTWKZ1yhV8R"
          }
        ]
      },
      "type": "knowledgeNode",
      "selected": false,
      "measured": {
        "width": 305,
        "height": 121
      },
      "dragging": false
    }
  ],
  "edges": [
    {
      "markerEnd": {
        "type": "arrowclosed",
        "width": 20,
        "height": 20
      },
      "source": "node_H10AF5d63BvSfJzZ",
      "target": "node_zQ7zeFMvsvA2j5AN",
      "id": "xy-edge__node_H10AF5d63BvSfJzZ-node_zQ7zeFMvsvA2j5AN",
      "selected": false
    }
  ],
  "viewport": {
    "x": 226.74624767788913,
    "y": 160.90033520722372,
    "zoom": 0.7578582832551992
  }
});

const fetchData = () => {
  if (tinyflowRef.value) {
    const data = tinyflowRef.value.getData();
    console.log('流程数据:', data);
  }
};
</script>
